<template>
  <ul>
    <li v-for="item in data" :key="item.text" @click.stop="toggle(item)">
      {{ item.text }}
      <!-- <ul>
        <li v-for="cItem in item.children" :key="cItem.text">
          {{ cItem.text }}
        </li>
      </ul> -->
      <Tree2 :data="item.children" v-if="item.expand"/>
    </li>
  </ul>
</template>

<script> 
/* 一个组件内部有自己的组件标签 */
export default {  // 
  name: 'Tree2',  // 必须得有name
  props: ['data'],


  methods: {
    toggle(item) {
      // 直接添加新属性不是响应式的
      // item.expand = !item.expand
      this.$set(item, 'expand', !item.expand)
    }
  }
}
</script>